<!--
 * @LastEditTime: 2021-11-17 17:50:53
 * @Description:
-->
<template>
  <el-card class="app-container">
    <div>
      <div class="mb10">
        <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
          <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="mini" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            刷新
          </el-button>
        </form-selections>
      </div>
      <el-table v-loading="loading" :data="data" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :max-height="screenHeigh">
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column align="center" prop="platform_name" label="平台" />
        <el-table-column align="center" prop="interface_name" label="接口名称" />
        <el-table-column align="center" prop="get_at" label="请求时间段" />
        <el-table-column align="center" prop="get_count" label="返回数据量" />
        <el-table-column align="center" prop="created_at" label="请求时间" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 50, 100, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </div>
  </el-card>
</template>
<script>
import formOperate from '@/layout/mixin/formOperate'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'OrderGetRecords',
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 345,
      componentName: 'OrderGetRecords',
      formName: 'orderGetRecords',
      formLabelWidth: '90px',
      // 刷新路由
      refreshRoute: true,
      queryParam: {
        start_at: '',
        end_at: ''
      },
      url: 'orderGetRecords',
      searchShop: 1,
      lableName: 'id',
      formItems: [
        {
          label: '平台名称',
          key: 'platform_name',
          type: 'input',
          placeholder: '请输入平台名称'
        },
        {
          label: '店铺',
          key: 'shop_id',
          type: 'select',
          multiple: false,
          filterable: true,
          placeholder: '请选择店铺',
          options: []
        },
        {
          label: '拉取时间',
          key: 'date',
          type: '',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
        }
      ]
    }
  },
  methods: {
    beforeSearch() {
      const vm = this
      vm.queryParam.start_at = ''
      vm.queryParam.end_at = ''
      if (vm.queryParam.date && vm.queryParam.date.length > 0) {
        vm.queryParam.start_at = vm.queryParam.date[0]
        vm.queryParam.end_at = vm.queryParam.date[1]
      }
    }
  }
}
</script>
